<html><head><meta charset="utf-8"><title>19 使用可辨识联合并保证每个case都被处理-慕课专栏</title>
			<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
			<meta name="renderer" content="webkit">
			<meta property="qc:admins" content="77103107776157736375">
			<meta property="wb:webmaster" content="c4f857219bfae3cb">
			<meta http-equiv="Access-Control-Allow-Origin" content="*">
			<meta http-equiv="Cache-Control" content="no-transform ">
			<meta http-equiv="Cache-Control" content="no-siteapp">
			<link rel="apple-touch-icon" sizes="76x76" href="https://www.imooc.com/static/img/common/touch-icon-ipad.png">
			<link rel="apple-touch-icon" sizes="120x120" href="https://www.imooc.com/static/img/common/touch-icon-iphone-retina.png">
			<link rel="apple-touch-icon" sizes="152x152" href="https://www.imooc.com/static/img/common/touch-icon-ipad-retina.png">
			<link href="https://moco.imooc.com/captcha/style/captcha.min.css" rel="stylesheet">
			<link rel="stylesheet" href="https://www.imooc.com/static/moco/v1.0/dist/css/moco.min.css?t=201907021539" type="text/css">
			<link rel="stylesheet" href="https://www.imooc.com/static/lib/swiper/swiper-3.4.2.min.css?t=201907021539">
			<link rel="stylesheet" href="https://static.mukewang.com/static/css/??base.css,common/common-less.css?t=2.5,column/zhuanlanChapter-less.css?t=2.5,course/inc/course_tipoff-less.css?t=2.5?v=201907051055" type="text/css">
			<link charset="utf-8" rel="stylesheet" href="https://www.imooc.com/static/lib/ueditor/themes/imooc/css/ueditor.css?v=201907021539"><link rel="stylesheet" href="https://www.imooc.com/static/lib/baiduShare/api/css/share_style0_16.css?v=6aba13f0.css"></head>
			<body><div id="main">

<div class="container clearfix" id="top" style="display: block; width: 1134px;">
    
    <div class="center_con js-center_con l" style="width: 1134px;">
        <div class="article-con">
                            <!-- 买过的阅读 -->
                <div class="map">
                    <a href="/read" target="_blank"><i class="imv2-feather-o"></i></a>
                    <a href="/read/35" target="_blank">零基础学透 TypeScript</a>
                    <a href="" target="_blank">
                        <span>
                            / 3-6 19 使用可辨识联合并保证每个case都被处理
                        </span>
                    </a>
                </div>

            


            <div class="art-title" style="margin-top: 0px;">
                19 使用可辨识联合并保证每个case都被处理
            </div>
            <div class="art-info">
                
                <span>
                    更新时间：2019-06-26 10:13:26
                </span>
            </div>
            <div class="art-top">
                                <img src="https://img3.mukewang.com/5d0c395d0001b8f906400359.jpg" alt="">
                                                <div class="famous-word-box">
                    <img src="https://www.imooc.com/static/img/column/bg-l.png" alt="" class="bg1 bg">
                    <img src="https://www.imooc.com/static/img/column/bg-r.png" alt="" class="bg2 bg">
                    <div class="famous-word">我好像是一只牛，吃的是草，挤出的是牛奶。<p class="author">——鲁迅</p></div>
                </div>
                            </div>
            <div class="art-content js-lookimg">
                <div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们可以把单例类型、联合类型、类型保护和类型别名这几种类型进行合并，来创建一个叫做<strong>可辨识联合</strong>的高级类型，它也可称作<strong>标签联合</strong>或<strong>代数数据类型</strong>。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">所谓单例类型，你可以理解为符合<a href="https://zh.wikipedia.org/wiki/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F">单例模式</a>的数据类型，比如枚举成员类型，字面量类型。</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">可辨识联合要求具有两个要素：</p>
</div><div class="cl-preview-section"><ul>
<li style="font-size: 20px; line-height: 38px;">具有普通的单例类型属性（这个要作为辨识的特征，也是重要因素）。</li>
<li style="font-size: 20px; line-height: 38px;">一个类型别名，包含了那些类型的联合（即把几个类型封装为联合类型，并起一个别名）。</li>
</ul>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">来看例子：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Square</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"square"</span><span class="token punctuation">;</span> <span class="token comment">// 这个就是具有辨识性的属性</span>
  size<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Rectangle</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"rectangle"</span><span class="token punctuation">;</span> <span class="token comment">// 这个就是具有辨识性的属性</span>
  height<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  width<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Circle</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"circle"</span><span class="token punctuation">;</span> <span class="token comment">// 这个就是具有辨识性的属性</span>
  radius<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">type</span> Shape <span class="token operator">=</span> Square <span class="token operator">|</span> Rectangle <span class="token operator">|</span> Circle<span class="token punctuation">;</span> <span class="token comment">// 这里使用三个接口组成一个联合类型，并赋给一个别名Shape，组成了一个可辨识联合。</span>
<span class="token keyword">function</span> <span class="token function">getArea</span><span class="token punctuation">(</span>s<span class="token punctuation">:</span> Shape<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>s<span class="token punctuation">.</span>kind<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">"square"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>size <span class="token operator">*</span> s<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"rectangle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>height <span class="token operator">*</span> s<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"circle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> Math<span class="token punctuation">.</span>PI <span class="token operator">*</span> s<span class="token punctuation">.</span>radius <span class="token operator">**</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面这个例子中，我们的 Shape 即可辨识联合，它是三个接口的联合，而这三个接口都有一个 kind 属性，且每个接口的 kind 属性值都不相同，能够起到标识作用。</p>
</div><div class="cl-preview-section"><blockquote>
<p style="font-size: 20px; line-height: 38px;">这里有个 ES7 的新特性：<strong>**</strong> 运算符，两个<code>*</code>符号组成的这个运算符就是求幂运算符，2 ** 3 ==&gt; 8</p>
</blockquote>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">看了上面的例子，你可以看到我们的函数内应该包含联合类型中每一个接口的 case。但是如果遗漏了，我们希望编译器应该给出提示。所以我们来看下两种<strong>完整性检查</strong>的方法：</p>
</div><div class="cl-preview-section"><h4 id="利用-strictnullchecks" style="font-size: 26px;">3.6.1 利用 strictNullChecks</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们给上面的例子加一种接口：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">interface</span> <span class="token class-name">Square</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"square"</span><span class="token punctuation">;</span>
  size<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Rectangle</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"rectangle"</span><span class="token punctuation">;</span>
  height<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  width<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Circle</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"circle"</span><span class="token punctuation">;</span>
  radius<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">interface</span> <span class="token class-name">Triangle</span> <span class="token punctuation">{</span>
  kind<span class="token punctuation">:</span> <span class="token string">"triangle"</span><span class="token punctuation">;</span>
  bottom<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
  height<span class="token punctuation">:</span> <span class="token keyword">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">type</span> Shape <span class="token operator">=</span> Square <span class="token operator">|</span> Rectangle <span class="token operator">|</span> Circle <span class="token operator">|</span> Triangle<span class="token punctuation">;</span> <span class="token comment">// 这里我们在联合类型中新增了一个接口，但是下面的case却没有处理Triangle的情况</span>
<span class="token keyword">function</span> <span class="token function">getArea</span><span class="token punctuation">(</span>s<span class="token punctuation">:</span> Shape<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>s<span class="token punctuation">.</span>kind<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">"square"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>size <span class="token operator">*</span> s<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"rectangle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>height <span class="token operator">*</span> s<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"circle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> Math<span class="token punctuation">.</span>PI <span class="token operator">*</span> s<span class="token punctuation">.</span>radius <span class="token operator">**</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">上面例子中，我们的 Shape 联合有四种接口，但函数的 switch 里只包含三个 case，这个时候编译器并没有提示任何错误，因为当传入函数的是类型是 Triangle 时，没有任何一个 case 符合，则不会有 return 语句执行，那么函数是默认返回 undefined。所以我们可以利用这个特点，结合 strictNullChecks(详见3.4小节) 编译选项，我们可以开启 strictNullChecks，然后让函数的返回值类型为 number，那么当返回 undefined 的时候，就会报错：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">getArea</span><span class="token punctuation">(</span>s<span class="token punctuation">:</span> Shape<span class="token punctuation">)</span><span class="token punctuation">:</span> <span class="token keyword">number</span> <span class="token punctuation">{</span>
  <span class="token comment">// error Function lacks ending return statement and return type does not include 'undefined'</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>s<span class="token punctuation">.</span>kind<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">"square"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>size <span class="token operator">*</span> s<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"rectangle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>height <span class="token operator">*</span> s<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"circle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> Math<span class="token punctuation">.</span>PI <span class="token operator">*</span> s<span class="token punctuation">.</span>radius <span class="token operator">**</span> <span class="token number">2</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">这种方法简单，但是对旧代码支持不好，因为strictNullChecks这个配置项是2.0版本才加入的，如果你使用的是低于这个版本的，这个方法并不会有效。</p>
</div><div class="cl-preview-section"><h4 id="使用-never-类型" style="font-size: 26px;">3.6.2 使用 never 类型</h4>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">我们在学习基本类型时学习过，当函数返回一个错误或者不可能有返回值的时候，返回值类型为 never。所以我们可以给 switch 添加一个 default 流程，当前面的 case 都不符合的时候，会执行 default 后的逻辑：</p>
</div><div class="cl-preview-section"><pre class="  language-typescript"><code class="prism  language-typescript"><span class="token keyword">function</span> <span class="token function">assertNever</span><span class="token punctuation">(</span>value<span class="token punctuation">:</span> never<span class="token punctuation">)</span><span class="token punctuation">:</span> never <span class="token punctuation">{</span>
  <span class="token keyword">throw</span> <span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span><span class="token string">"Unexpected object: "</span> <span class="token operator">+</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">getArea</span><span class="token punctuation">(</span>s<span class="token punctuation">:</span> Shape<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">switch</span> <span class="token punctuation">(</span>s<span class="token punctuation">.</span>kind<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">case</span> <span class="token string">"square"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>size <span class="token operator">*</span> s<span class="token punctuation">.</span>size<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"rectangle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> s<span class="token punctuation">.</span>height <span class="token operator">*</span> s<span class="token punctuation">.</span>width<span class="token punctuation">;</span>
    <span class="token keyword">case</span> <span class="token string">"circle"</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> Math<span class="token punctuation">.</span>PI <span class="token operator">*</span> s<span class="token punctuation">.</span>radius <span class="token operator">**</span> <span class="token number">2</span><span class="token punctuation">;</span>
    <span class="token keyword">default</span><span class="token punctuation">:</span>
      <span class="token keyword">return</span> <span class="token function">assertNever</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// error 类型“Triangle”的参数不能赋给类型“never”的参数</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">采用这种方式，需要定义一个额外的 asserNever 函数，但是这种方式不仅能够在编译阶段提示我们遗漏了判断条件，而且在运行时也会报错。</p>
</div><div class="cl-preview-section"><h3 id="本节小结">本节小结</h3>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">本小节我们学习了可辨识联合类型，定义一个可辨识联合类型有两个要素：具有普通的单例类型属性，和一个类型别名。第一个要素是最重要的一点，因为编译器要根据这个属性来判断当前分支是什么类型，而第二个要素并不影响使用，你完全可以指定上面例子中的s为<code>Square | Rectangle | Circle</code>而不使用<code>Shape</code>。最后我们讲了两种避免遗忘处理某个case的方法：利用strictNullChecks和使用never类型，都能够帮我们检查遗漏的case，第二种方法的提示更为全面，推荐大家使用。</p>
</div><div class="cl-preview-section"><p style="font-size: 20px; line-height: 38px;">下个小节我们将学习<strong>this类型</strong>，我们知道this是JavaScript中的关键字，可以用来获取全局对象、类实例对象、构造函数实例等的引用，但是在TypeScript中，它也是一种类型，我们下节课再来细讲。<br>
<img src="http://img.mukewang.com/5d0345480001826e16000366.jpg" alt="图片描述" data-original="http://img.mukewang.com/5d0345480001826e16000366.jpg" class="" style="cursor: pointer;"></p>
</div></div>
            </div>
                            <!-- 买过的阅读 -->
                <div class="art-next-prev clearfix">
                                                                        <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/355">
                                                    <div class="prev l clearfix">
                                <div class="icon l">
                                    <i class="imv2-arrow3_l"></i>
                                </div>
                                <p>
                                    18 类型别名和字面量类型—单调的类型
                                </p>
                            </div>
                        </a>
                                                                                            <!-- 已买且开放 或者可以试读 -->
                            <a href="/read/35/article/357">
                                                    <div class="next r clearfix">
                                <p>
                                    20 this，类型？
                                </p>
                                <div class="icon r">
                                    <i class="imv2-arrow3_r"></i>
                                </div>

                            </div>
                        </a>
                                    </div>
                    </div>
        <div class="comments-con js-comments-con" id="coments_con">
        </div>



    </div>
    
    
    

</div>
 
<!-- 专栏介绍页专栏评价 -->

<!-- 专栏介绍页底部三条评价 -->

<!-- 专栏阅读页弹层目录和介绍页页面目录 -->

<!-- 专栏阅读页发布回复 -->

<!-- 专栏阅读页发布评论 -->

<!-- 专栏阅读页底部评论 -->

<!-- 专栏阅读 单个 评论 -->

<!-- 新增回复和展开三条以外回复 -->

<!-- 立即订阅的弹窗 -->












</div></body></html>